<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getAddressListService, addAddressService, updateAddressService, deleteAddressService } from '@/apis/address'


const addresses = ref([]);
const total = ref(0)
const params = ref({
    page: 1,
    pageSize: 5
})

const getAddressList = async () => {
    const res = await getAddressListService(params.value)
    addresses.value = res.data.items
    total.value = res.data.total
}
onMounted(() => getAddressList())

// 页数切换
const pageChange = (page) => {
    params.value.page = page
    getAddressList()
}

// 创建格式化函数
const formatIsDefault = ({ isDefault }) => {
    const statusMap = {
        0: '否',
        1: '是'
    }
    return statusMap[isDefault]
}

//添加地址数据模型
const address = ref({
    consignee: '',
    phone: '',
    provinceName: '',
    cityName: '',
    districtName: '',
    detail: '',
    label: '',
    isDefault: '0'
})

//控制添加地址弹窗
const dialogVisible = ref(false)

//添加地址表单校验
const rules = {
    consignee: [
        { required: true, message: '请输入收货人名称', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    provinceName: [
        { required: true, message: '请输入省份', trigger: 'blur' }
    ],
    cityName: [
        { required: true, message: '请输入城市', trigger: 'blur' }
    ],
    districtName: [
        { required: true, message: '请输入城市所在区', trigger: 'blur' }
    ],
    detail: [
        { required: true, message: '请输入详细地址', trigger: 'blur' }
    ],
    label: [
        { required: true, message: '请输入地址标签', trigger: 'blur' }
    ]
}

const addAddress = async () => {
    await addAddressService(address.value)
    ElMessage.success("添加成功")
    getAddressList()
    dialogVisible.value = false
}
//控制标题展示
const title = ref('')

//展示编辑弹窗
const showDialog = (row) => {
    dialogVisible.value = true
    title.value = '编辑地址'
    //数据拷贝
    address.value.consignee = row.consignee
    address.value.phone = row.phone
    address.value.provinceName = row.provinceName
    address.value.cityName = row.cityName
    address.value.districtName = row.districtName
    address.value.detail = row.detail
    address.value.label = row.label
    address.value.isDefault = row.isDefault.toString()
    address.value.id = row.id
}

const updateAddress = async () => {
    await updateAddressService(address.value)
    ElMessage.success("修改成功")
    getAddressList()
    dialogVisible.value = false
}

const deleteAddress = (row) => {
    ElMessageBox.confirm(
        '你确认删除该地址信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //用户点击了确认
            await deleteAddressService(row.id)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            getAddressList()
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


const clearData = () => {
    address.value.consignee = ""
    address.value.phone = ""
    address.value.provinceName = ""
    address.value.cityName = ""
    address.value.districtName = ""
    address.value.detail = ""
    address.value.label = ""
    address.value.isDefault = ""
}


</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>我的地址</span>
                <div class="extra">
                    <el-button type="primary"
                        @click="dialogVisible = true; title = '添加地址'; clearData()">添加地址</el-button>
                </div>
            </div>
        </template>
        <el-table :data="addresses" style="width: 100%">
            <el-table-column label="收货人" prop="consignee" width="70"></el-table-column>
            <el-table-column label="手机号" prop="phone" width="120"></el-table-column>
            <el-table-column label="省级名称" prop="provinceName"></el-table-column>
            <el-table-column label="市级名称" prop="cityName"></el-table-column>
            <el-table-column label="区级名称" prop="districtName"></el-table-column>
            <el-table-column label="详细地址" prop="detail" width="150"></el-table-column>
            <el-table-column label="标签" prop="label" width="60"></el-table-column>
            <el-table-column label="默认" prop="isDefault" width="60" :formatter="formatIsDefault"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteAddress(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 添加地址弹窗 -->
        <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-form :model="address" :rules="rules" label-width="100px" style="padding-right: 30px">
                <el-form-item label="收货人" prop="consignee">
                    <el-input v-model="address.consignee" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="address.phone" minlength="1" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="省级名称" prop="provinceName">
                    <el-input v-model="address.provinceName" minlength="1" maxlength="5"></el-input>
                </el-form-item>
                <el-form-item label="市级名称" prop="cityName">
                    <el-input v-model="address.cityName" minlength="1" maxlength="5"></el-input>
                </el-form-item>
                <el-form-item label="区级名称" prop="districtName">
                    <el-input v-model="address.districtName" minlength="1" maxlength="5"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="detail">
                    <el-input v-model="address.detail" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="标签" prop="label">
                    <el-select v-model="address.label" placeholder="请选择">
                        <el-option label="家" value="家"></el-option>
                        <el-option label="学校" value="学校"></el-option>
                        <el-option label="公司" value="公司"></el-option>
                        <el-option label=" " value=" "></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="默认" prop="isDefault">
                    <el-radio-group v-model="address.isDefault">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="title == '添加地址' ? addAddress() : updateAddress()"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination :total="total" @current-change="pageChange" :page-size="params.pageSize" background
                layout="prev, pager, next" />
        </div>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pagination-container {
        display: flex;
        justify-content: center;
    }

}
</style>